<template>
    <el-select 
        v-model="modelValue"
        placeholder="请选择商品" 
        style="width: 200px"
        clearable
    >
        <el-option
            v-for="item in goodsList"
            :key="item.id"
            :label="item.goods_name"
            :value="item.id"
        ></el-option>
    </el-select>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { getAllGoodsList } from '@/api/common'

// 使用 defineModel 简化 v-model 实现
const modelValue = defineModel<number | string>('modelValue')

const props = defineProps<{
    battleData?: string | number
}>()

const goodsList = ref([])

const handleGoodsList = async () => {
    const res = await getAllGoodsList()
    goodsList.value = res
}

// 组件挂载时加载商品列表
onMounted(() => {
    handleGoodsList()
})

// 监听 battleData 变化，实现反显
watch(() => props.battleData, (newValue) => {
    if (newValue !== undefined && newValue !== null) {
        modelValue.value = Number(newValue)
    }
}, { immediate: true })
</script>

<style lang="scss" scoped></style>
